<template>
  <div>主页</div>
  <button @click="methods.toHomemin">go homemin</button>
  <button @click="methods.toSearch">go search</button>

  <!-- <router-link to="/home/homemin?a=123&b=456">go homemin</router-link> -->
  <!-- <router-view></router-view> -->

  <van-divider>以下是vuex的使用</van-divider>
  <!-- <van-button>{{ count }}</van-button> -->
  <span>vuex中的count：{{ state.count }}</span>
  <van-button plain hairline type="success" @click="methods.addCount"
    >count++</van-button
  >
  <van-button>getter方法获取count：{{ status }}</van-button>
  <van-divider>以下是axios的使用</van-divider>
  <van-button @click="methods.postFun">post请求mock数据</van-button>
</template>
<script>
import { computed, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default {
  setup() {
    const router = useRouter()
    const store = useStore()
    // console.log('vux数据仓库store:', store.state)
    const instance = getCurrentInstance()
    const { proxy } = instance
    console.log('proxy:', proxy)
    function toHomemin() {
      router.push({
        path: '/homemin2',
        query: {
          a: '123',
          b: '456',
        },
      })
    }

    function toSearch() {
      router.push({
        path: '/search',
      })
    }

    function addCount() {
      store.commit('addCount')
    }

    async function postFun() {
      const res = await proxy.$post('/parameter/query')
      console.log('请求：', res)
    }

    return {
      methods: {
        toHomemin,
        toSearch,
        addCount,
        postFun,
      },
      // count: computed(() => store.state.count), //官方推荐使用计算属性保留“响应性”
      state: store.state,
      status: computed(() => store.getters.getStatus),
    }
  },
}
</script>
